﻿var covericon = "";
var courseData = {};
var tags = [];

$(function() {
    createForm();
    createEditor();
    showCourseTags();

    showCourseInfo();

    bindSubmit();

    bindUploadify();

    $("#txt_catalog").catalogs({ dataurl: rootpath + "api/course.ashx", parmsdata: { type: "getcatalogs", pid: 0} });
});

function createEditor() {
    KE.show({
        id: 'txt_description',
        imageUploadJson: '../../../api/upload_json.ashx',
        fileManagerJson: '../../../api/file_manager_json.ashx',
        allowFileManager: true,
        resizeMode: 1,
        shadowMode: true,
        width: '90%',
        height: '260px'
    });
    KE.show({
        id: 'txt_lecturerintro',
        imageUploadJson: '../../../api/upload_json.ashx',
        fileManagerJson: '../../../api/file_manager_json.ashx',
        allowFileManager: true,
        resizeMode: 1,
        shadowMode: true,
        width: '90%',
        height: '260px'
    });
}

function createForm() {
    $("#dv_content").append('\
         <table cellspacing="1" class="editortable">\
            <tr>\
                <th width="20%" class="th"></th>\
                <td class="td">\
                    <input type="submit" id="btn_submit2" class="btn" value="修改" />\
                </td>\
            </tr>\
            <tr>\
                <th class="th">课程类型：</th>\
                <td class="td">\
                    <input type="radio" id="rbtn_scorm" name="coursetype" value="1" disabled="disabled" /><label for="rbtn_scorm">SCORM1.2</label>\
                    <input type="radio" id="rbtn_video" name="coursetype" value="2" disabled="disabled"/><label for="rbtn_video">非标准课程</label>\
                </td>\
            </tr>\
            <tr>\
                <th class="th">课程名称：</th>\
                <td class="td">\
                    <input type="text" id="txt_coursename" name="txt_coursename" class="txt" style="width:300px" />\
                </td>\
            </tr>\
            <tr>\
                <th class="th">课程编号：</th>\
                <td class="td">\
                    <input type="text" id="txt_serialnumber" readonly="readonly" name="txt_serialnumber" class="txt" style="width:300px" />\
                    <div class="note1">\
                        编号请小心填写，添加后即不能修改<br />编号由4 - 10位的英文字母与数字组成例如：ex0101，cm0101 \
                    </div>\
                </td>\
            </tr>\
             <tr>\
                <th class="th">课程目录：</th>\
                <td class="td">\
                    <input type="text" id="txt_catalog" name="txt_catalog" class="txt" style="width:300px" />\
                </td>\
            </tr>\
            <tr>\
                <th class="th">课程时长：</th>\
                <td class="td">\
                    <input type="text" id="txt_playlength" name="txt_playlength" class="txt" style="width:300px" />\
                    <div class="note1">\
                        单位：(分钟) \
                    </div>\
                </td>\
            </tr>\
            <tr>\
                <th class="th">课程缩略图：</th>\
                <td class="td">\
                    <div>\
                        <div id="dv_upload" class="left" style="padding:5px;"><input type="file" name="uploadify" id="uploadify" /><p class="note1">选择一张图片作为课程封面图</p></div>\
                        <div id="dv_queue" style="height:60px;float:left;"></div>\
                        <div class="left" id="dv_preview"></div>\
                        <div class="clear"></div>\
                    </div>\
                </td>\
            </tr>\
            <tr>\
                <th class="th">是否公开：</th>\
                <td class="td">\
                    <input type="radio" id="rbtn_ispublic" name="ispublic" checked="checked" value="1" /><label for="rbtn_ispublic">公开</label>\
                    <input type="radio" id="rbtn_nopublic" name="ispublic" value="0" /><label for="rbtn_nopublic">不公开</label>\
                </td>\
            </tr>\
             <tr>\
                <th class="th">是否推荐：</th>\
                <td class="td">\
                    <input type="radio" id="rbtn_isrecommend" name="isrecommend" checked="checked" value="1" /><label for="rbtn_isrecommend">推荐</label>\
                    <input type="radio" id="rbtn_unrecommend" name="isrecommend" value="0" /><label for="rbtn_unrecommend">不推荐</label>\
                </td>\
            </tr>\
            <tr>\
                <th class="th">关键字：</th>\
                <td class="td">\
                  <div id="dv_tags"></div>\
                </td>\
            </tr>\
            <tr>\
                <th class="th">课程介绍：</th>\
                <td class="td">\
                    <textarea id="txt_description" name="txt_description" cols="100" rows="8" style="visibility:hidden;"></textarea>\
                </td>\
            </tr>\
            <tr>\
                <th class="th">讲师介绍：</th>\
                <td class="td">\
                    <textarea id="txt_lecturerintro" name="txt_lecturerintro" cols="100" rows="8" style="visibility:hidden;"></textarea>\
                </td>\
            </tr>\
            <tr>\
                <th class="th"></th>\
                <td class="td">\
                    <input type="submit" id="btn_submit" class="btn" value="修改" />\
                </td>\
            </tr>\
        </table>\
    ');
}

function bindUploadify() {
    $("#uploadify").uploadify({
        'uploader': rootpath + 'swf/uploadify.swf',
        'script': 'create.ashx',
        'scriptData': { type: 'uploadcovericon', covericon: covericon, courseid: courseid },
        'cancelImg': rootpath + 'images/cancel.png',
        'buttonImg': rootpath + 'images/browse-files.png',
        'folder': rootpath + 'data/coursepicture',
        'queueID': 'dv_queue',
        'displayData': 'speed',
        'auto': true,
        'multi': false,
        'width': 130,
        'sizeLimit': 1024 * 1024 * 2,
        'fileDesc': '请选择gif jpg pgn bmp jpeg文件',
        'fileExt': '*.gif;*.jpg;*.png;*.bmp;*.jpeg',
        onSelect: function(event, queueid, fileobj) {
            $.ajax({
                type: "GET",
                url: rootpath + "api/course.ashx",
                data: { type: 'createfilename', r: Math.random() },
                dataType: "string",
                async: false,
                success: function(data) {
                    covericon = data + fileobj.type;
                }
            });

            $("#uploadify").uploadifySettings('scriptData', { 'covericon': covericon });
        },
        onOpen: function() {

        },
        onComplete: function(event, queueid, fileobj) {
            $("#dv_preview").empty();
            $("<img/>").css({ width: '160px', height: '120px' }).attr("src", getCourseCover(covericon)).appendTo($("#dv_preview"));
            $("#dv_preview").append("&nbsp;");
            $("<input type='button' class='deleteButton' />").click(function() {
                $.ajax({
                    type: "post",
                    url: url,
                    data: { type: 'deletecovericon', filename: covericon },
                    dataType: "string",
                    success: function(data) {
                        if (data == 1) {
                            $("#dv_preview").fadeOut("slow");
                            covericon = "";
                        }
                    }
                });
            }).appendTo($("#dv_preview"));
            $("#dv_preview").fadeIn("slow");
            formloaded();
        },
        onError: function() {
            covericon = "";
        },
        onCancel: function() {
            covericon = "";
            $("#uploadify").uploadifyClearQueue();
        }
    });
}

function showCourseInfo() {
    $.ajax({
        type: "get",
        url: rootpath + "api/course.ashx",
        data: { type: "getcourseinfo", isedit: 1, courseid: courseid, r: Math.random() },
        dataType: "json",
        success: function(data) {
            courseData = data;

            $(":radio[value='" + data.coursetype + "']").attr("checked", "checked");

            $("#txt_coursename").val(data.coursename);
            $("#txt_serialnumber").val(data.serialnumber);

            $("#txt_catalog").val(data.catalogname);
            $("#txt_catalog").attr("rel", data.catalogid);
            $("#txt_playlength").val(data.playlength);

            KE.html("txt_description", data.description)
            KE.html("txt_lecturerintro", data.lecturerintro);

            if (data.covericon != "") {
                covericon = data.covericon;

                $("<img/>").css({ width: '160px', height: '120px' }).attr("src", getCourseCover(data.covericon)).appendTo($("#dv_preview"));
                $("#dv_preview").append("&nbsp;");
                $("<input type='button' class='deleteButton' />").click(function() {
                    $.ajax({
                        type: "post",
                        url: "create.ashx",
                        data: { type: 'deletecovericon', filename: covericon, courseid: courseid },
                        dataType: "string",
                        success: function(data) {
                            if (data == 1) {
                                $("#dv_preview").fadeOut("slow");
                                covericon = "";
                            }
                        }
                    });
                }).appendTo($("#dv_preview"));
                $("#dv_preview").show();
            }


            formloaded();
        }
    });
}

function showCourseTags() {
    $.ajax({
        type: "get",
        url: rootpath + "api/course.ashx",
        data: { type: "getcoursetags", cid: courseid, r: Math.random() },
        dataType: "json",
        async: false,
        success: function(data) {
            $("#dv_tags").tagselector({ dataurl: rootpath + "api/tag.ashx", width: "90%", onSelectChange: getTags, curdata: data });
        }
    });
}

function getTags(_tagbox) {
    tags = _tagbox;
}

function bindSubmit() {
    $("form").validate({
        rules: {
            txt_coursename: { required: true },
            txt_catalog: { required: true },
            txt_playlength: { digits: true }
        },
        messages: {
            txt_coursename: { required: "课程名称不能为空！" },
            txt_catalog: { required: "课程目录不能为空！" },
            txt_playlength: { digits: "课程播放时长必需为整数！" }
        },
        submitHandler: function() {
            $(".btn").attr("disabled", "disabled").after("<span>提交中.....</span>");

            var ispublic = $(":radio[name='ispublic']").filter(":checked").val();
            var isrecommend = $(":radio[name='isrecommend']").filter(":checked").val();
            var coursename = $("#txt_coursename").val();
            var serialnumber = $("#txt_serialnumber").val();
            var description = KE.html("txt_description");
            var intro = KE.html("txt_lecturerintro");
            var keywords = "";
            var tagids = "";
            $.each(tags, function(i, item) {
                keywords += "|" + item.tname + "|";
                tagids += item.tid + ",";
            });
            var playlength = $("#txt_playlength").val();
            var catalogid = $("#txt_catalog").attr("rel");
            $.ajax({
                type: "post",
                url: url,
                data: {
                    type: 'updatecourse',
                    courseid: courseid,
                    cname: coursename,
                    ispublic: ispublic,
                    isrecommend: isrecommend,
                    description: description,
                    intro: intro,
                    keywords: keywords,
                    tagids: tagids,
                    playlength: playlength,
                    catalogid: catalogid,
                    curcatalogid: courseData.catalogid,
                    covericon: covericon
                },
                dataType: "string",
                success: function(data) {
                    if (data > 0) {
                        facebox("修改课程成功！");
                        closeDialog();
                    }
                    else {
                        facebox("添加课程失败！");
                    }
                    $(".btn").attr("disabled", "").next("span").remove();
                }
            });
        }
    });
}